<template>
	<view id="news-list">
		<header-top></header-top>
		<view class="content-news">
			<view class="news-ul" v-if="newsArr.length > 0">
				<view class="news-li" v-for="(item,index) in newsArr" :key="item.id" @click="toDetail(item.id)">
					<view class="left">
						<view class="h3">{{item.title}}</view>
						<view class="h6">{{item.create_time}}</view>
					</view>
					<image class="li-img" :src="item.cover" mode=""></image>
				</view>
			</view>
			<view class="no-ul" v-else>
				-- 暂无更多 --
			</view>
		</view>
		
		<!-- 底部tabBar -->
		<diy-bottom-nav type="shop" :tabIndex="3" ></diy-bottom-nav>
	</view>
</template>

<script>
	import headerTop from '@/components/headerTop.vue'
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
export default {
	data() {
		return {
			newsArr: [],
			page: 1,
			totalPage: 1,
		};
	},
	onLoad() {
		this.getList();
	},
	components: {
		headerTop,
		diyBottomNav
	},
	onShow() {

	},
	methods: {
		// 去详情
		toDetail(cid){
			uni.navigateTo({
				url: `/pages/news/data?cid=${cid}`
			})
		},
		getList(){
			this.$api.sendRequest({
				url: '/api/article/page',
				data: {
					page: this.page,
					page_size: 10,
				},
				method: 'get',
				success: res=>{
					if(res.code == 0){
						let result = res.data;
						this.totalPage = result.page_count;
						if(this.page == 1){
							this.newsArr = result.list
						}else {
							this.newsArr.push(...result.list)
						}
					}
				}
			})
		},
	},
	onReachBottom() {
		if (this.page >= this.totalPage) return
		this.page++
		this.getList()
	}
};
</script>

<style scoped lang="scss">
	.content-news {
		padding: 100rpx 0px 140rpx;
	}
	.news-ul {
		width: 100%;
		padding: 0px 32rpx 0rpx;
		box-sizing: border-box;
		.news-li {
			width: 100%;
			margin-top: 28rpx;
			background: #fff;
			padding: 36rpx 26rpx 22rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			.li-img {
				width: 188rpx;
				height: 130rpx;
				border-radius: 8rpx;
				display: block;
				margin-left: 20rpx;
			}
			.left {
				width: calc(100% - 208rpx);
				.h3 {
					font-size: 30rpx;
					font-weight: 600;
					color: #282828;
					line-height: 40rpx;
					@include nowraps(2);
				}
				.h6 {
					padding-top: 16rpx;
					font-size: 24rpx;
					color: #92969E;
					line-height: 40rpx;
				}
			}
		}
	}
</style>
